<template>
  <el-icon :style="customStyle" @click="emit('click')">
    <component :is="name" v-if="type === ICON_TYPE.EL_ICON" />
    <svg-icon v-else :name="name" :size="size" :style="customStyle" />
  </el-icon>
</template>

<script setup name="Icon">
import { ICON_TYPE } from '@/const'
import { addUnit } from '@/app/style'
import useConfigStore from '@/store/modules/config'
import SvgIcon from './svg-icon'

defineOptions({ name: 'Icon' })
const props = defineProps({
  name: [Object, Function, String],
  style: [Object, String],
  type: {
    type: String,
    default: ICON_TYPE.EL_ICON,
  },
  size: {
    type: [Number, String],
    default: 18,
  },
  color: String,
  // 颜色是否跟随主题色变化
  followTheme: {
    type: Boolean,
    default: false,
  },
})
const emit = defineEmits(['click'])

const customStyle = computed(() => {
  const p = props
  const style = {
    fontSize: addUnit(p.size),
    color:
      p.color ||
      (p.followTheme ? useConfigStore().globalConfig.primaryColor : ''),
    ...p.style,
  }

  return style
})
</script>

<style>
.el-icon {
  cursor: pointer;
}
</style>
